<template>
	<view>
		<view class="content-card bottom-space">

			<view class="title-dot">库存</view>

			<view v-for="(item, index) in storeList" :key="index" class="item-car">

				<text class="carno">{{item.carNo}}</text>
				<view class="store">停靠门店：<text>{{item.locatedStoreName}}</text></view>

			</view>

		</view>

		<view class="content-card bottom-space" v-if="orderList.length>0">

			<view class="title-dot">订单</view>
			
			<view v-for="(item, index) in orderList" :key="index" class="item-car" style="padding: 12rpx 23rpx;">
			
				<view class="order-item-wrap">
					<text class="name">租赁时间</text>
					<text class="value">{{item.actualStartTime}}~{{item.actualEndTime}}</text>
				</view>
			
				<view class="order-item-wrap">
					<text class="name">订单状态</text>
					<!-- 0.待支付 1待分配 2.待排车 3.待取车 4.用车中 5.车损结算 6.押金结算 7.违章处理 8.违章结算 9已完成 10.已取消 11.结算退款中 -->
					<text class="value">{{
						0==item.orderStatus?'待支付':
						1==item.orderStatus?'待分配':
						2==item.orderStatus?'待排车':
						3==item.orderStatus?'待取车':
						4==item.orderStatus?'用车中':
						5==item.orderStatus?'车损结算':
						6==item.orderStatus?'押金结算':
						7==item.orderStatus?'违章处理':
						8==item.orderStatus?'违章结算':
						9==item.orderStatus?'已完成':
						10==item.orderStatus?'已取消':
						11==item.orderStatus?'结算退款中':'--'
						}}</text>
				</view>
			
				<view class="order-item-wrap">
					<text class="name">取车门店</text>
					<text class="value">{{item.takeStoreName||'--'}}</text>
				</view>
			
				<view class="order-item-wrap">
					<text class="name">车牌号</text>
					<text class="value">{{item.carNo||'--'}}</text>
				</view>
			
			</view>

		</view>

	</view>
</template>

<script>
	import * as api from '@/api/car-api.js'

	export default {
		components: {},
		data() {
			return {
				storeList:[],
				orderList:[],
				params:{},
			}
		},
		onLoad(op) {
			const params = JSON.parse(decodeURIComponent(op.params));
			this.params = params;
			this.getcarstorage();
			this.getcarorder();
		},
		methods: {
			getcarstorage() {
				let param = {
					// modelId:'',
					// storeId:'',
					// startTime:'',
					// endTime:'',
					...this.params,
					pageNum: 1,
					pageSize: 100,
				}
				
				api.chedulingcarlist(this.toParams(param)).then(res => {
					this.storeList = res.rows;
				})
			},
			getcarorder() {
				let param = {
					// modelId:'',
					// storeId:'',
					// startTime:'',
					// endTime:'',
					...this.params,
					pageNum: 1,
					pageSize: 100,
				}
				
				api.chedulingorderlist(this.toParams(param)).then(res => {
					this.orderList = res.rows;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item-car {
		background-color: #FAFAFA;
		border-radius: 8rpx;
		margin: 23rpx 23rpx 0;
		display: flex;
		flex-direction: column;
		padding: 32rpx 23rpx;

		.carno {
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.store {
			margin-top: 23rpx;
			color: #666;
			font-size: 28rpx;
			display: flex;

			text {
				flex: 1;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	
	.order-item-wrap{
		height: 63rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		
		.name{
			font-size: 28rpx;
			color: #666;
		}
		
		.value{
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
			flex: 1;
			text-align: end;
			margin-left: 10rpx;
		}
	}

	.content-card {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 16rpx;
		background-color: white;

	}

	.title-dot {
		margin-left: 47rpx;
		color: #333;
		padding: 32rpx 0;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			position: absolute;
			left: -16rpx;
			width: 8rpx;
			height: 24rpx;
			border-radius: 4rpx;
			background-color: #2879FF;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -47rpx;
			right: 0;
			height: 2rpx;
			background-color: #f5f5f5;
		}
	}

	.bottom-space {
		padding-bottom: 32rpx;
	}
</style>
